<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>基础数据</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 图表容器 -->
    <div class="chart-container">
      <!-- 图表1：柱状图 - 库存分布 -->
      <div class="chart-item" ref="barChartRef">
        <div class="chart-title">库存分布</div>
         
        <div class="chart-content"></div>
      </div>

      <!-- 图表2：饼图 - 商品品类占比 -->
      <div class="chart-item" ref="pieChartRef">
        <div class="chart-title">商品品类占比</div>
        <div class="chart-content"></div>
      </div>

      <!-- 图表3：折线图 - 入库趋势 -->
      <div class="chart-item" ref="lineChartRef">
        <div class="chart-title">入库趋势</div>
        <div class="chart-content"></div>
      </div>

      <!-- 图表4：雷达图 - 商品综合评分 -->
      <div class="chart-item" ref="radarChartRef">
        <div class="chart-title">商品综合评分</div>
        <div class="chart-content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts/core';

// 引入所需组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// 注册组件（确保全局可用）
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  CanvasRenderer
]);

const barChartRef = ref(null);
const pieChartRef = ref(null);
const lineChartRef = ref(null);
const radarChartRef = ref(null);

let barInstance = null;
let pieInstance = null;
let lineInstance = null;
let radarInstance = null;

// 图表配置
const barOption = {
  title: { text: '库存分布', left: 'center' },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['苹果', '裤衩', '小米手环', 'xxx洗面奶', '羊毛毛衣']
  },
  yAxis: { type: 'value' },
  series: [{ name: '库存', type: 'bar', data: [10, 20, 30, 40, 50] }]
};

const pieOption = {
  title: { text: '商品品类占比', left: 'center' },
  tooltip: { trigger: 'item' },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 16 } },
      data: [
        { value: 33, name: '电子产品' },
        { value: 25, name: '服饰' },
        { value: 20, name: '日用品' },
        { value: 12, name: '食品' },
        { value: 10, name: '其他' }
      ]
    }
  ]
};

const lineOption = {
  title: { text: '入库趋势', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
  yAxis: { type: 'value' },
  series: [
    {
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210],
      smooth: true,
      areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' }, { offset: 1, color: '#e0f7ff' }]) }
    }
  ]
};

const radarOption = {
  title: { text: '商品综合评分', left: 'center' },
  tooltip: { trigger: 'item' },
  radar: {
    indicator: [
      { name: '价格', max: 100 },
      { name: '质量', max: 100 },
      { name: '物流', max: 100 },
      { name: '售后', max: 100 },
      { name: '口碑', max: 100 }
    ],
    shape: 'circle'
  },
  series: [
    {
      type: 'radar',
      areaStyle: { color: 'rgba(102, 185, 255, 0.2)' },
      lineStyle: { color: '#66b9ff' },
      symbol: 'none',
      data: [
        {
          value: [80, 90, 70, 85, 95],
          name: '小米手环'
        }
      ]
    }
  ]
};

const onResize = () => {
  barInstance?.resize();
  pieInstance?.resize();
  lineInstance?.resize();
  radarInstance?.resize();
};

onMounted(() => {
  // 初始化柱状图
  if (barChartRef.value) {
    barInstance = echarts.init(barChartRef.value.querySelector('.chart-content'));
    barInstance.setOption(barOption);
  }

  // 初始化饼图
  if (pieChartRef.value) {
    pieInstance = echarts.init(pieChartRef.value.querySelector('.chart-content'));
    pieInstance.setOption(pieOption);
  }

  // 初始化折线图
  if (lineChartRef.value) {
    lineInstance = echarts.init(lineChartRef.value.querySelector('.chart-content'));
    lineInstance.setOption(lineOption);
  }

  // 初始化雷达图
  if (radarChartRef.value) {
    radarInstance = echarts.init(radarChartRef.value.querySelector('.chart-content'));
    radarInstance.setOption(radarOption);
  }

  window.addEventListener('resize', onResize);
});

onBeforeUnmount(() => {
  barInstance?.dispose();
  pieInstance?.dispose();
  lineInstance?.dispose();
  radarInstance?.dispose();
  window.removeEventListener('resize', onResize);
});
</script>

<style scoped>


.topNav {
  background: #ffffff;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaecef;
  margin-bottom: 16px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.chart-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaecef;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.chart-title {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #4a5568;
  background: #f8f9fa;
  border-bottom: 1px solid #eaecef;
}

.chart-content {
  width: 100%;
  height: 300px;
  padding: 16px;
  box-sizing: border-box;
}

/* 响应式 */
@media (max-width: 768px) {
  .chart-container {
    grid-template-columns: 1fr;
  }

  .chart-item {
    margin-bottom: 16px;
  }
}
</style>